/**
 * 登录页面JavaScript - 用户认证系统
 * 
 * 本文件提供了登录页面的完整交互功能，包括用户认证、表单验证、
 * 状态管理、消息提示和用户体验优化等核心功能。
 * 
 * 主要功能：
 * - 用户认证：用户名和密码验证
 * - 表单验证：输入数据验证和错误提示
 * - 状态管理：登录状态、记住用户名功能
 * - 消息提示：成功/错误消息的优雅显示
 * - 用户体验：键盘导航、自动聚焦、加载状态
 * - 数据持久化：本地存储用户名和用户信息
 * - 页面跳转：登录成功后的智能跳转
 * 
 * 技术特点：
 * - 异步认证处理：使用fetch API进行HTTP请求
 * - 实时表单验证：输入时即时反馈
 * - 状态持久化：localStorage和sessionStorage
 * - 动画效果：消息提示的滑入滑出动画
 * - 键盘导航：支持Tab和Enter键操作
 * - 错误处理：完善的异常处理和用户提示
 * - 响应式设计：适配不同屏幕尺寸
 * 
 * 页面结构：
 * - 登录表单：用户名、密码输入框
 * - 记住我选项：用户名记忆功能
 * - 提交按钮：登录操作入口
 * - 错误模态框：错误消息显示
 * - 成功提示：登录成功消息
 * 
 * API接口：
 * - POST /api/login：用户登录认证
 * 
 * 使用场景：
 * - 教师登录系统
 * - 学生用户认证
 * - 管理员登录
 * - 系统访问控制
 * 
 * 依赖关系：
 * - HTML：login.html页面结构
 * - CSS：login.css样式文件
 * - API：后端认证接口
 * - Font Awesome：图标库
 */
// ==================== 页面初始化 ====================

/**
 * 页面加载完成后初始化
 * 
 * DOMContentLoaded事件处理器，负责登录页面的初始化工作。
 * 包括DOM元素获取、状态恢复、事件绑定和用户体验设置。
 * 
 * 初始化流程:
 * 1. 获取DOM元素引用
 * 2. 恢复保存的用户名
 * 3. 绑定表单提交事件
 * 4. 设置键盘导航
 * 5. 自动聚焦用户名输入框
 * 
 * 用户体验优化:
 * - 自动恢复记住的用户名
 * - 键盘导航支持
 * - 自动聚焦到用户名输入框
 * - 加载状态反馈
 */
document.addEventListener('DOMContentLoaded', function() {
    // 获取DOM元素引用
    const loginForm = document.getElementById('loginForm');
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');
    const rememberMeCheckbox = document.getElementById('rememberMe');
    
    // 从本地存储恢复用户名
    // 如果用户之前选择了"记住我"，自动填充用户名
    const savedUsername = localStorage.getItem('rememberedUsername');
    if (savedUsername) {
        usernameInput.value = savedUsername;
        rememberMeCheckbox.checked = true;
    }
    
    // ==================== 表单处理 ====================
    
    /**
     * 表单提交事件处理器
     * 
     * 处理用户提交登录表单的完整流程，包括数据验证、API调用、
     * 状态管理和页面跳转。
     * 
     * 处理流程:
     * 1. 阻止默认表单提交行为
     * 2. 获取并验证表单数据
     * 3. 显示加载状态
     * 4. 发送登录请求到服务器
     * 5. 处理登录响应
     * 6. 更新本地存储
     * 7. 显示结果消息
     * 8. 跳转到目标页面
     * 
     * 验证规则:
     * - 用户名不能为空
     * - 密码不能为空
     * - 自动聚焦到错误字段
     * 
     * 状态管理:
     * - 记住用户名功能
     * - 用户信息存储
     * - 登录状态维护
     * 
     * 错误处理:
     * - 输入验证失败
     * - 网络请求失败
     * - 服务器响应错误
     */
    loginForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 获取表单数据
        const username = usernameInput.value.trim();
        const password = passwordInput.value;
        const rememberMe = rememberMeCheckbox.checked;
        
        // 基本验证
        if (!username) {
            showError('请输入用户名');
            usernameInput.focus();
            return;
        }
        
        if (!password) {
            showError('请输入密码');
            passwordInput.focus();
            return;
        }
        
        // 显示加载状态
        const submitBtn = loginForm.querySelector('button[type="submit"]');
        submitBtn.classList.add('loading');
        submitBtn.disabled = true;
        
        // 发送登录请求
        fetch('/api/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                username: username,
                password: password,
                rememberMe: rememberMe
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 登录成功处理
                if (rememberMe) {
                    localStorage.setItem('rememberedUsername', username);
                } else {
                    localStorage.removeItem('rememberedUsername');
                }
                
                // 存储用户信息到会话存储
                sessionStorage.setItem('user', JSON.stringify(data.user));
                
                // 显示成功消息
                showSuccess('登录成功，正在跳转...');
                
                // 跳转到目标页面
                setTimeout(() => {
                    const redirectUrl = data.redirect || '/teacher';
                    window.location.href = redirectUrl;
                }, 1000);
            } else {
                showError(data.message || '登录失败，请检查用户名和密码');
            }
        })
        .catch(error => {
            console.error('登录错误:', error);
            showError('网络错误，请稍后重试');
        })
        .finally(() => {
            // 移除加载状态
            submitBtn.classList.remove('loading');
            submitBtn.disabled = false;
        });
    });
    
    // ==================== 键盘导航和用户体验 ====================
    
    /**
     * 键盘事件处理器
     * 
     * 为登录表单提供键盘导航支持，提升用户体验。
     * 支持Tab键在输入框间切换，Enter键提交表单。
     * 
     * 导航逻辑:
     * - 在用户名输入框按Enter：聚焦到密码输入框
     * - 在密码输入框按Enter：提交登录表单
     * - Tab键：正常的表单元素切换
     * 
     * 用户体验优化:
     * - 减少鼠标操作需求
     * - 提高登录效率
     * - 符合用户习惯
     */
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            if (document.activeElement === usernameInput) {
                passwordInput.focus();
            } else if (document.activeElement === passwordInput) {
                loginForm.dispatchEvent(new Event('submit'));
            }
        }
    });
    
    // 自动聚焦到用户名输入框
    // 页面加载完成后自动聚焦，提升用户体验
    usernameInput.focus();
});

// ==================== 消息显示和用户反馈 ====================

/**
 * 显示错误消息
 * 
 * 在错误模态框中显示错误消息，用于登录失败等错误情况。
 * 提供清晰的错误提示，帮助用户理解问题所在。
 * 
 * 功能特点:
 * - 模态框显示，确保用户注意到错误
 * - 清晰的错误消息文本
 * - 用户友好的错误提示
 * 
 * @param {string} message - 错误消息文本
 */
function showError(message) {
    const errorModal = document.getElementById('errorModal');
    const errorMessage = document.getElementById('errorMessage');
    
    errorMessage.textContent = message;
    errorModal.style.display = 'flex';
}

/**
 * 关闭错误模态框
 * 
 * 关闭错误消息模态框，恢复页面正常状态。
 * 可以通过点击关闭按钮或模态框外部区域触发。
 */
function closeErrorModal() {
    const errorModal = document.getElementById('errorModal');
    errorModal.style.display = 'none';
}

/**
 * 显示成功消息
 * 
 * 创建并显示成功提示消息，用于登录成功等成功情况。
 * 使用动态创建的提示框，具有优雅的动画效果。
 * 
 * 功能特点:
 * - 动态创建提示框
 * - 滑入滑出动画效果
 * - 自动消失（3秒后）
 * - 固定位置显示
 * - 绿色成功主题
 * 
 * 样式特点:
 * - 固定定位在右上角
 * - 绿色背景和边框
 * - 圆角边框和阴影
 * - Font Awesome图标
 * - 响应式动画
 * 
 * @param {string} message - 成功消息文本
 */
function showSuccess(message) {
    // 创建成功提示元素
    const successDiv = document.createElement('div');
    successDiv.className = 'alert alert-success';
    successDiv.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1001;
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
        border-radius: 8px;
        padding: 15px 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        animation: slideIn 0.3s ease;
    `;
    successDiv.innerHTML = `<span class="fa fa-check-circle"></span> ${message}`;
    
    // 添加到页面
    document.body.appendChild(successDiv);
    
    // 3秒后自动移除
    setTimeout(() => {
        successDiv.style.animation = 'slideOut 0.3s ease';
        setTimeout(() => {
            if (successDiv.parentNode) {
                successDiv.parentNode.removeChild(successDiv);
            }
        }, 300);
    }, 3000);
}

// ==================== 样式和动画 ====================

/**
 * 动态添加CSS动画样式
 * 
 * 为成功消息提示添加滑入滑出动画效果。
 * 使用CSS3动画，提供流畅的视觉体验。
 * 
 * 动画特点:
 * - slideIn: 从右侧滑入，透明度从0到1
 * - slideOut: 向右侧滑出，透明度从1到0
 * - 0.3秒动画时长，ease缓动函数
 * - 平滑的transform和opacity变化
 * 
 * 技术实现:
 * - 动态创建style元素
 * - 使用CSS3 @keyframes
 * - transform: translateX() 实现滑动效果
 * - opacity 实现淡入淡出效果
 */
const style = document.createElement('style');
style.textContent = `
    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOut {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);

// ==================== 模态框交互 ====================

/**
 * 点击模态框外部关闭功能
 * 
 * 为错误模态框添加点击外部区域关闭的功能。
 * 提升用户体验，符合常见的模态框交互模式。
 * 
 * 交互逻辑:
 * - 监听全局点击事件
 * - 检查点击目标是否为模态框背景
 * - 如果是背景区域，则关闭模态框
 * - 如果是模态框内容区域，则不关闭
 * 
 * 用户体验:
 * - 符合用户习惯
 * - 提供便捷的关闭方式
 * - 避免误操作
 */
window.addEventListener('click', function(e) {
    const errorModal = document.getElementById('errorModal');
    if (e.target === errorModal) {
        closeErrorModal();
    }
});

/**
 * 关闭按钮事件绑定
 * 
 * 为模态框的关闭按钮绑定点击事件。
 * 提供明确的关闭操作入口。
 * 
 * 功能特点:
 * - 绑定到关闭按钮
 * - 点击时关闭模态框
 * - 提供清晰的关闭操作
 */
document.querySelector('.close').addEventListener('click', closeErrorModal);
